QT使用教程：如何从设计工具中导入Qt Bridge

Qt是目前最先进、最完整的跨平台C++开发工具。它不仅完全实现了一次编写，所有平台无差别运行，更提供了几乎所有开发过程中需要用到的工具。如今，Qt已被运用于超过70个行业、数千家企业，支持数百万设备及应用。

点击下载QT最新试用版

为了在使用Qt Bridge for Adobe Photoshop将设计从Adobe Photoshop导出到Qt Design Studio时获得最佳结果，请在使用Photoshop时遵循以下准则：

如果您想使用Adobe Illustrator创建图稿，则可以将作品作为智能对象复制粘贴到Adobe Photoshop 。然后，您可以在Photoshop中双击智能对象，以在Illustrator中将其打开以进行编辑。因为使用的是智能对象，所以所有更改都会传播到Photoshop中设计中使用的对象的所有实例。

要在Qt Design Studio中也使用在Photoshop中使用的字体，需要将它们加载到Qt Design Studio中。预览UI时，Qt Design Studio会将它们部署到设备上。有关更多信息，请参见使用自定义字体。

从Adobe Photoshop导出设计并将其导入Qt Design Studio时，将保留画板上的组和图层之间的关系。

使用Qt Bridge for Adobe Photoshop导出设计时，您需要确定希望如何导出每个组或图层：作为组件或子组件。组件是可以包含其他资产的单个QML文件。子项是单个PNG文件，可以在QML文件中使用。

如果您打算在UI中将作品的一部分用作单独的图像，请在画板上将它们作为单独的图层进行分组。然后，您可以将组导出为组件，并将其中的每个层导出为子级。子级将作为单独的PNG文件导入Qt Design Studio，您可以将其用作图像源。

要将画板的内容用作UI中的单个图像，可以在导出组和图层时合并它们。导入期间，将内容压平为一个PNG文件。合并的方式使您可以在Photoshop或Adobe Illustrator中更改组和图层，然后再次导出和导入画板。例如，这是一种创建最终用户界面外观的参考图像的简便方法。

将UI的不同部分（例如菜单和弹出窗口）放置在单独的画板上，以便能够将它们导出为组件或子代并将其导入为QML和PNG文件，您可以将其拖放到Qt Design中的“ 表单编辑器”中创建UI时使用Studio设计模式。

Qt Design Studio提供了预定义的UI控件集，您可以根据需要进行修改。您可以将自己的控件导出为QML类型，Qt快速控件或Studio组件。控件的位置和尺寸被保留。

但是，如果希望UI控件（如复选框）看起来像在Photoshop中一样，则必须在Artboard中创建控件，并在要创建控件实例的图层中使用Artboard。Qt Bridge将控件导出为可在Qt Design Studio中编程的自定义QML组件。

每个画板都会自动导出为组件。也就是说，一个单独的QML文件包含画板上的所有图稿，但被设置为跳过或导出为子项的图层除外。您确定如何导出画板中的每个组或图层：作为组件或子项。此外，您可以将画板的组和图层作为一项合并到父级中，也可以完全跳过图层。

默认情况下，图层导出如下：

Qt Bridge for Adobe Photoshop会自动为所有组和图层提议标识符（QML id）。这些ID将在Qt Design Studio中用作文件名。您可以更改ID，以便可以在Qt Design Studio中轻松找到它们。请记住，这些ID必须是唯一的，并且它们必须遵循某些命名约定。

您可以使用默认设置导出，并稍后在Qt Design Studio中进行所有更改。如果您熟悉QML语法，则可以修改设置以在一定程度上调整生成的QML。例如，您可以指定要用于组件或图层的QML类型或Studio组件。如果绘制了要进行动画处理的路径，则可以将其导出为Arc Studio组件，以避免在Qt Design Studio中将路径图像替换为Arc组件。或者，您可以将按钮导出为Qt Quick Controls 2按钮类型。

您可以指定要用于组或图层的效果，例如模糊效果。

在Qt Design Studio 设计模式下，“ 库”的“ QML类型”选项卡中列出了Qt Design Studio支持的QML类型。有关更多信息，请参见创建组件。

您还可以为QML类型的属性指定值，或创建属性别名以从其他属性中获取值。

要使用Qt Bridge for Adobe Photoshop导出设计，请执行以下操作：

所有资产和元数据都将复制到您指定的目录中。这可能需要一些时间，具体取决于项目的复杂性。

您现在可以在Qt Design Studio中创建一个项目，并将资产导入到其中，如创建项目和导入设计中所述。

Qt Bridge for Adobe Photoshop允许从活动文档中删除所有Qt Bridge for Adobe Photoshop相关的元数据。在“ Qt Bridge for Adobe Photoshop 设置”对话框中，选择“ 清理文档”以清理活动文档。清理成功后，文档将不包含用于Adobe Photoshop的Qt Bridge相关元数据，并且用于Adobe Photoshop的Qt Bridge图层设置将恢复为默认值。

注意：清理是在内存中完成的，必须保存文档以保持清理状态。

您可以借助JSX脚本更改Qt Bridge for Adobe Photoshop的默认行为。可以在脚本中编写特定功能，这些功能由Qt Bridge for Adobe Photoshop调用，并带有有用的参数。

您可以在替代JSX中定义以下函数。

注意：请参考Adobe Photoshop CC Javascript>脚本指南以了解对象模型以及Document和Layer>实例。

在“ Qt Bridge for Adobe Photoshop 设置”对话框中，选择“ 替代JSX脚本”以设置替代JSX脚本。

如果你对我们的产品感兴趣或者有任何疑问，欢迎咨询慧都在线客服>>

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至[email protected]